<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>生产订单</title>
    <!-- 引入 Element UI 的样式 -->
    <!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" /> -->
    <link rel="stylesheet" href="../../assets/css/element-ui.css" />
    <link rel="stylesheet" href="../../assets/css/styles.css" />
    <!-- 引入 QRCode 库 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/qrcode-generator@1.4.4/qrcode.min.js"></script> -->
    <script src="../../assets/js/qrcode.min.js"></script>
    <script src="../../assets/js/cdn.js"></script>

  </head>
  <body>
    <div id="app">
      <lx-header slot="header" v-on:toggle="isToggle = !isToggle"></lx-header>
      <div class="app-containers main-content">
        <div class="container">
          <div class="content" style="width: 100%">
            <div class="center-grid mb-20">
              <el-table v-loading="tableLoading" :data="tableData" stripe style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column v-for="(item, index) in tableColumnData" :key="index" :label="item.fieldName" min-width="150" :width="item.width">
                  <template slot-scope="scope">
                    <el-button v-if="item.fieldApi==='moCode'" size="mini" type="text" @click="openDetail(scope.row)">{{scope.row.moCode}}</el-button>
                    <template v-else-if="item.fieldApi==='orderType'"> {{ getOptionsStr('so_type',scope.row[item.fieldApi]) }} </template>
                    <template v-else-if="item.fieldApi==='orderStatus'"> {{ getOptionsStr('so_status',scope.row[item.fieldApi]) }} </template>
                    <template v-else> {{ scope.row[item.fieldApi] }} </template>
                  </template>
                </el-table-column>
                <el-table-column label="操作" :resizable="false" :show-overflow-tooltip="false" min-width="200" fixed="right">
                  <template slot-scope="scope">
                    <el-button type="text" @click="openDetail(scope.row)"> 详情 </el-button>
                    <el-button type="text" @click="generateQRCode(scope.row)"> 生成二维码 </el-button>
                    <el-button type="text" class="ml2" @click="openDelete(scope.row)"> 删除 </el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination :current-page="searchData.pageNo" :page-sizes="pageSizes" :page-size="searchData.pageSize" layout="total,prev,pager,next,sizes,jumper" :total="total" background @size-change="handleSizeChange" @current-change="handleCurrentChange"> </el-pagination>
            </div>

            <!-- 添加或修改销售订单信息对话框 -->
            <el-dialog title="生产订单二维码" :visible.sync="qrcodeDialog" width="330px" append-to-body>
              <!-- <img :src="qrcodeImage" alt="QR Code" v-if="qrcodeImage" /> -->
              <img :src="qrcodeImage" alt="QR Code" v-if="qrcodeImage" />
            </el-dialog>
          </div>
        </div>
      </div>



      <div style="display: none">
        <div id="print">
          <div style="text-align: center;background-color: rgb(128,128,128)">
            <div style="text-align: center;font-size: 50px;padding-top:5%;color:red">
              生产订单信息
            </div>
            <div style="text-align: center;font-size: 35px;padding-bottom:5%;margin-top:5%;color:red">
              <span id="moCode"></span>
            </div>
          </div>

          <div class="barcode-row" style="height: 75%">
            <img id="barcode" src="" style="height: 80%;width: 100%"/>
          </div>
        </div>
      </div>
    </div>
    <script src="../../assets/js/constant.js"></script>
    <script src="../../assets/js/utils.js"></script>
<script src="../../assets/js/auth.js"></script>
    <script src="../../assets/js/axios.min.js"></script>
    <!-- 引入 Vue.js -->
    <script src="../../assets/js/vue.js"></script>
    <!-- 引入 Element UI 的 JS 文件 -->
    <script src="../../assets/js/element-ui.js"></script>

    <script type="module">
      import LxHeader from '../../pages/components/LxHeader/index.js'
      Vue.component('lx-header', LxHeader)

      checkAuthentication(2)
      new Vue({
        isToggle: false,
        el: '#app',
        components: {},
        data() {
         return {
            currentUser: JSON.parse(localStorage.getItem('currentUser')) || {},
            userMenuList: JSON.parse(localStorage.getItem('userMenuList')) || [],
            showDropdown: false,
            businessCenters: [
              { name: '订单中心', path: '../index.html' },
              { name: '用户中心', path: '#' },
              { name: '产品中心', path: '#' },
              { name: '库存中心', path: '#' },
              { name: '财务中心', path: '#' },
              { name: '数据中心', path: '#' },
              { name: '系统中心', path: '#' },
              { name: '消息中心', path: '#' }
            ],
            dicts: ['so_status', 'so_type'],
            optionsObj: {},
            searchData: {
              soType: 3,
              pageNo: 1,
              pageSize: 10
            },
            total: 0,
            tableData: [],
            tableColumnData: [
              {
                fieldName: '订单编号',
                fieldApi: 'moCode',
                width:'210'
              },
              {
                fieldName: '关联销售订单编号',
                fieldApi: 'soCode',
                width:'210'
              },
              {
                fieldName: '生产开始时间',
                fieldApi: 'startTime',
                width:'190'
              },
              {
                fieldName: '生产结束时间',
                fieldApi: 'endTime',
                width:'190'
              },
              {
                fieldName: '预计交付时间',
                fieldApi: 'expectedTime',
                width:'190'
              },
              {
                fieldName: '订单状态',
                fieldApi: 'orderStatus'
              },
              {
                fieldName: '创建时间',
                fieldApi: 'createTime',
                width:'200'
              },
              {
                fieldName: '创建人',
                fieldApi: 'createBy'
              }
            ],
            tableLoading: false,
            detailId: '',
            root_host: root_host,
            request_host: request_host,
            pageSizes: pageSizes,
            multipleSelection: [],
            qrcodeDialog: false,
            qrcodeImage: ''
          }
        },
        created() {
          this.init()
        },
        methods: {
          exit,
          init() {
            this.detailId = getUrlParameter('id')
            this.getOptions()
            this.getData()
          },
          getOptions() {
            this.dicts.forEach((item) => {
              axios.get(`${this.request_host}/system/dict/data/type/${item}`).then((response) => {
                this.$set(this.optionsObj, item, {})
                if (response.status == 200) {
                  response.data.data.map((item1) => {
                    this.optionsObj[item][item1.dictValue] = item1.dictLabel
                  })
                }
              })
            })
          },
          getOptionsStr(opt, value) {
            if (this.optionsObj[opt] && value) {
              return this.optionsObj[opt][value]
            }
            return ''
          },
          getData() {
            try {
              axios.get(`${this.request_host}/order/manufactureOrder/list?pageNum=${this.searchData.pageNo}&pageSize=${this.searchData.pageSize}`).then((response) => {
                if (response.status == 200) {
                  this.tableData = response.data.rows
                }
              })
            } catch (error) {
              console.error('请求失败:', error)
            }
          },
          openDetail(row) {
            window.open(`manufacture_order_item.html?moCode=${row.moCode}`)
          },
          openDelete(row) {
            this.$confirm(`是否确认删除生产订单信息编号为${row.moCode}的数据项？`, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            })
              .then(() => {
                axios
                  .delete(`${this.request_host}/order/manufactureOrder/${row.moCode}`)
                  .then((response) => {
                    if (response.status == 200) {
                      this.$message({
                        type: 'success',
                        message: '删除成功!'
                      })
                      this.getData()
                    }
                  })
                  .catch((error) => {
                    console.error('Error deleting resource:', error)
                  })
              })
              .catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消删除'
                })
              })
          },
          handleQuery() {
            this.getData()
          },
          resetQuery() {
            this.searchData = {
              soType: 3,
              pageNo: 1,
              pageSize: 10
            }
          },
          handleSelectionChange(val) {
            this.multipleSelection = val
          },
          // 分页数量切换
          handleSizeChange(val) {
            this.$set(this.searchData, 'pageSize', val)
            this.getData()
          },
          // 当前页码切换
          handleCurrentChange(val) {
            this.$set(this.searchData, 'pageNo', val)
            this.getData()
          },
          openMenu(url) {
            window.open(url)
          },
          async generateQRCode(row) {
            try {
              const qr = qrcode(0, 'M');
              qr.addData('cmo='+row.moCode);
              qr.make();
              this.qrcodeImage = qr.createDataURL(10, 20);
              document.getElementById('moCode').innerHTML='订单号: '+row.moCode;
              document.getElementById('barcode').setAttribute("src", this.qrcodeImage);
            } catch (error) {
              console.error('生成二维码失败:', error);
              this.$message.error('生成二维码失败');
            }
            var newWin = window.open('')
            var imageToPrint = document.getElementById('print')
            newWin.document.write(imageToPrint.outerHTML)
            const styleSheet = `<style>
                html{margin:0px}
                @page {margin: 0; }
                body{margin:0px;overflow:hidden;}
                #print {width:95%;margin:0px auto;padding:5px 0px;}
                .barcode-row{text-align: center;padding-bottom:5px;padding-top:3px}
                </style>`
            newWin.document.head.innerHTML = styleSheet
            newWin.document.close()
            newWin.focus()
            setTimeout(function () {
              newWin.print() // 打印
              newWin.close() // 关闭窗口
            }, 100)
        },
        }
      })
    </script>
    <style>
      .el-table th.el-table__cell {
        background-color: #f2f2f2; /* 例如，设置为浅灰色 */
      }
    </style>
  </body>
</html>
